<style>
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
</style>
<div class="widget-head" style="margin-top:0;">
    <div class="widget-title">用户列表</div>
</div>
<div class="layui-container" style="width:100%;">
    <div class="layui-clear">
        <a class="layui-btn fl" href="javascript:;" onclick="think_open('{:U('edit')}','添加用户',['60%','630px'],0)"> 添加</a>
        <a class="layui-btn layui-btn-danger think-btn" data-type="del" data-url="/admin/user/del">删除</a>
        <form method="GET" action="{:U('index')}" class="fr layui-form" style="width:400px;">
            <div class="layui-input-inline fl" style="width:100px;">
                <php>$types = ['username'=>'用户名','mobile'=>'手机号'];</php>
                <select name="searchtype">
                                    <foreach name="types" item="vo" key="k">
                                        <option value="{$k}" <if condition="$_GET['searchtype'] eq $k">selected</if>>{$vo}</option>
                                    </foreach>
                                </select>
            </div>
            <div class="layui-input-inline fr" style="width:300px;">
                <button class="layui-btn fr" lay-submit>搜索</button>
                <input type="text" class="layui-input fr" style="width:230px;" name="keywords" placeholder="请输入关键词" value="{$_GET['keywords']}">
            </div>
            <php> $condition = $_GET['searchtype'] && $_GET['keywords'] ? "/searchtype/".$_GET['searchtype']."/keywords/".$_GET['keywords'] : '';</php>
            <script>
                var condition = '{$condition}';
            </script>
        </form>
    </div>
    <table id="list" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <div class="layui-btn-group action-btn">
            <!-- {{# if(d.role == 'teacher' || d.role == 'student' || d.role == 'parent'){ }}
            <a class="layui-btn layui-btn-normal layui-btn-xs repwd reload" data-url="/admin/user/reset_pwd/id/{{d.id}}">重置密码</a> {{# } }} -->
            <a class="layui-btn layui-btn-xs" lay-event="edit" onclick="think_open('/admin/user/edit/id/{{d.id}}','编辑用户信息',['60%','60%'],0)">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs mini_del reload" lay-event="del" data-url="/admin/user/del/ids/{{d.id}}">删除</a>
        </div>
    </script>

    <script type="text/html" id="restatus">
        {{# if(d.status == 0){ }} 已禁用 {{# } else { }} 正常使用 {{# } }}
    </script>

    <script type="text/html" id="rerole">
        {{# if(d.role == 'admin'){ }} 管理员 {{# } else if(d.role == 'teacher') { }} 教师 {{# } else if(d.role == 'student') { }} 学生 {{# } else { }} 家长 {{# } }}
    </script>

</div>

<script>
    layui.use(['think'], function() {
        var think = layui.think,
            $ = layui.jquery;

        //第一个实例
        think.render({
            elem: '#list',
            // height: 500,
            url: '/admin/user/getdata' + condition,
            toolbar: true,
            cols: [
                [ //表头
                    {
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        sort: true,
                        fixed: 'left'
                    }, {
                        field: 'username',
                        title: '用户名'
                    }, {
                        field: 'realname',
                        title: '真实姓名'
                    }, {
                        field: 'nickname',
                        title: '昵称'
                    }, {
                        field: 'mobile',
                        title: '手机号',
                        sort: true
                    }, {
                        field: 'email',
                        title: '邮箱'
                    }, {
                        field: 'role',
                        title: '角色',
                        toolbar: '#rerole'
                    }, {
                        field: 'status',
                        title: '账户状态',
                        toolbar: '#restatus'
                    }, {
                        field: 'create_time',
                        title: '注册时间',
                        sort: true,
                        templet: function(d) {
                            return think_time(d.time, 'Y-m-d H:i:s'); //think_time()是think.js里面的方法
                        }
                    }, {
                        title: '操作',
                        width: 240,
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ]
            ]
        }, '{$_GET["searchtype"]}', '{$_GET["keywords"]}');

        //重置密码
        // $('#repwd').unbind('click').click(function() {
        //     console.log(111111111);
        //     var $this = $(this);
        //     var asker = layer.confirm('确定重置密码吗？', function() {
        //         var ii;
        //         $.ajax({
        //             url: $this.attr('data-url'),
        //             type: "get",
        //             dataType: "json",
        //             beforeSend: function() {
        //                 ii = layer.msg('Loading...', {
        //                     icon: 16,
        //                     time: 10000
        //                 });
        //             },
        //             complete: function() {
        //                 layer.close(ii);
        //             },
        //             success: function(data) {
        //                 if (data.status) {
        //                     layer.msg("重置密码为‘123456’", {
        //                         icon: 1,
        //                         time: 1000
        //                     }, function() {
        //                         if ($this.hasClass('reload')) {
        //                             location.reload(); //自动关闭后可做一些刷新页面等操作
        //                         } else {
        //                             //重新渲染表格
        //                             for (var i = 0; i < think_table.length; i++) {
        //                                 table.reload(think_table[i]);
        //                             }
        //                         }

        //                     });
        //                 } else {
        //                     layer.msg(data.info, {
        //                         icon: 2,
        //                         time: 1000
        //                     });
        //                 }
        //             }
        //         });
        //     });
        // });

    });
</script>